<template>
<div class="templateManager">
  <div></div>
    <main>
      <!-- 右侧主内容区 -->
      <div class="main-right" >
         <!--搜索框-->
        <el-row>
            <el-button>
                <el-input v-model="input" placeholder="请输入模板名称" size="mini"></el-input>
            </el-button>

            <el-button>
                <el-button type="success" icon="el-icon-search" size="mini" @click="search()">搜索</el-button>
            </el-button>
            <!--新增按钮-->
            <router-link to="/ui/addTemplate">
              <el-button :span="1" class="grid">
                  <el-button type="success" icon="el-icon-plus" size="mini" >新增</el-button>
              </el-button>
            </router-link>
        </el-row>
        <br>
        <!--表格数据及操作-->
        <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" tooltip-effect="dark">
            <!--勾选框-->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!--索引-->
            <el-table-column prop="id" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="模板名称" width="180" sortable>
            </el-table-column>
            <el-table-column prop="description" label="模板描述" width="180" sortable>
            </el-table-column>
            <el-table-column label="模板" width="180" >
              <template slot-scope="scope">
                  <el-button  v-if="scope.row.id != ''" type="success" @click = "preView(scope.row.id)" icon="el-icon-document" size="mini">预览</el-button>
              </template>
            </el-table-column>
            <el-table-column label="编辑前端模板" width="120">
                <template slot-scope="scope">
                   <el-button v-if="scope.row.id != ''" type="primary" @click = "update(scope.row.id)" icon="el-icon-edit" size="mini">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除前端模板" width="120">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-minus" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <br>

        <!--分页条-->
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </div>
    </main>
  </div>
</template>

 <script>
 import Vue from 'vue'
 import Element from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import 'element-ui/lib/index.js'
 Vue.use(Element)
 export default {
  name: 'templateManager',
  data: function (){
    return {
     active:true,
     input: "",
     //表格数据
      tableData: [
      ]

    }
  },
  watch:{

  },
  methods:{
    search(){
        this.$http.get('http://127.0.0.1:8080/template').then(function(result){
              var body = result.body
                if (body.success === true) {
                    this.tableData=[]
                    body.payload.forEach((item) => {
                                          this.tableData.push(item);
                                       })
                 }
              },function(result){
                 alert(result.status)
               });
     },
     add(){
       this.$router.push({path:"/ui/addTemplate"});
     },
     preView(id){
       console.log(id)
       this.$router.push({name:"preView", params: {templateId: id}});
     },
     update(id){
       console.log(id)
       this.$router.push({name:"updateTemplate", params: {templateId: id}});
     }
   },
   created (){//无法在这里面直接调用method中的方法
      this.$http.get('http://127.0.0.1:8080/template').then(function(result){
          // console.log(result)
          var body = result.body
          if (body.success === true) {
              this.tableData=[]
              if(!body.payload){
                return
              }
              body.payload.forEach((item) => {
                                    this.tableData.push(item);
                                 })

              // console.log(JSON.stringify(this.tableData))
          }
          },function(result){
             alert(result.status)
          });
   },
   render:{

   }
 }
 </script>

 <style>
     #templateManager {
         font-family: Helvetica, sans-serif;
         text-align: center;
     }
 </style>
